<template>
  <div class="goods-group-container">
    <div class="goods-group-top">
      <div class="goods-group-top-saerch">
        <l-input v-model="search" placeholder="请输入名称" size="small" style="width:240px">
          <el-button slot="suffix" type="text" size="small" class="search-button" @click="searchName">
            <i class="el-icon-search"></i>
          </el-button>
        </l-input>
      </div>
      <el-button class="goods-group-top-add" type="primary" size="small"
        @click="reset(); openAdd = true; isAdd = true; title = '新增'">新增</el-button>
    </div>

    <div class="goods-group-content">
      <el-table 
        :data="goodsGroup" 
        style="width:100%" 
        row-key="id" 
        default-expand-all 
        :tree-props="{ children: 'data' }">
        <el-table-column prop="name" label="分类名称" align="left">
          <template slot-scope="scope">
            {{scope.row.parent_id == '0' ? '':'└─ '}}{{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" width="90">
          <template slot-scope="scope">
            <el-input @change='changeSort(scope.row)' size="mini" v-model="scope.row.sort"/>
          </template>
        </el-table-column>
        
        <el-table-column label="分类图标" align="center">
          <template slot-scope="scope">
            <l-pic
              :picurl="scope.row.pic_url"
              :pickey="scope.row.id"
              :picdata="scope.row"
              :picmargin="'0'"
              :size="{ width:30, height:30 }"
              :ischecked="false"
              :disdel="false"/>
          </template>
        </el-table-column>
        <el-table-column label="分类海报" align="center">
          <template slot-scope="scope">
            <l-pic
              :picurl="scope.row.img_url"
              :pickey="scope.row.id"
              :picdata="scope.row"
              :picmargin="'0'"
              :size="{ width:30, height:30 }"
              :ischecked="false"
              :disdel="false"/>
          </template>
        </el-table-column>
        <el-table-column label="默认显示" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-color="#13ce66" @change="updateStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button class="action-button" type="text"
              @click="eidt(scope.row)"><i class="el-icon-edit"/></el-button>
            <el-button class="action-button"
              @click="isDel = true; groupData = scope.row" type="text">
              <svg-icon icon-class="shanchu"/>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination class="page"
      background
      layout="total, prev, pager, next, jumper"
      :total="number"
      :page-size="10"
      :current-page="page"
      @size-change="changePage"
      @current-change="changePage">
    </el-pagination>

    <el-dialog :visible.sync="openAdd" :title="title" width="400px" center>
      <add :isAdd="isAdd" :groupData="groupData" v-if="openAdd" @success="openAdd = false; getGoodsGroup()"/>
    </el-dialog>

    <el-dialog :visible.sync="isDel" width="200px" :modal="false" :show-close="false" center>
      <p>确定要删除该分组吗？</p>
      <div slot="footer">
        <el-button size="mini" type="primary" @click="isDel = false">取消</el-button>
        <el-button size="mini"                @click="del()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import LInput from '@/components/input'
import LPic from '@/components/lPic'
import Add from './components/add'
import mixin from './mixin'
import { putGoodsGroupStatus, putGoodsGroup, delGoodsGroup, getGoodsGroup } from '@/api/goods'

export default {
  name: 'goodsgroup',
  mixins: [mixin],
  components: {
    LInput,
    LPic,
    Add
  },
  data() {
    return {
      search: '',//搜索
      page: 1,//页码

      openAdd: false,//打开添加面板
      title: '添加',
      isAdd: true,
      groupData: {},

      isDel: false
    }
  },
  mounted() {
    //获取商品分组列表
    this.getGoodsGroup();
  },
  methods: {
    /**
     * 编辑
     *  */
    eidt(data) {
      this.groupData = data
      this.openAdd = true;
      this.isAdd = false;
      this.title = '修改';
    },
    /**
     * 修改状态
     */
    updateStatus(data) {
      console.log(this.$store.state.app.activeApp)
      const params = {
        id: data.id,
        status: data.status ? '1' : '0',
        key: this.$store.state.app.activeApp.saa_key
      };
      putGoodsGroupStatus(params).then(response => {
        if(response.status === 200){
          this.$message.success('修改成功');
          // this.getGoodsGroup();
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 删除
     */
    del() {
      this.isDel = false;

      const params = {
        id: this.groupData.id,
        key: this.$store.state.app.activeApp.saa_key
      };

      delGoodsGroup(params).then(response => {
        if(response.status === 200){
          this.$message.success('删除成功！');
          this.getGoodsGroup();
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 换页
     */
    changePage(page) {
      this.page = page;
      this.getGoodsGroup();
    },
    /**
     * 搜索
     */
    searchName() {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        limit: 10,
        page: 1,
        searchName: this.search
      }

      getGoodsGroup(params).then(response => {
        if(response.status === 200){
          this.number = response.count;
          this.goodsGroup = response.data;
          this.page = 1;
          this.goodsGroup.forEach(item=>{
            if(item.status==='1'){
              item.status = true;
            }else{
              item.status = false;
            }
            item.data.forEach(childItem => {
              if(childItem.status==='1'){
                childItem.status = true;
              }else{
                childItem.status = false;
              }
            })
          })
        }else{
          this.$message.error(response.message)
        }
      })
    },
    /**
     * 切换排序
     */
    changeSort(e) {
      console.log(e)
      const params = {
        id: e.id,
        status: e.status ? '1' : '0',
        parent_id: e.parent_id,
        name: e.name,
        pic_url: e.pic_url,
        sort: e.sort,
        key: this.$store.state.app.activeApp.saa_key
      };
      putGoodsGroup(params).then(response => {
        if(response.status === 200){
          this.$message.success('修改成功');
          this.getGoodsGroup();
        }else{
          this.$message.error(response.message);
        }
      })
    }
  },
}
</script>

<style lang="css" scoped>
.goods-group-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
.goods-group-top{
  padding: 5px 0;
}
.goods-group-top-saerch{
  float: right;
  max-width: 240px;
}
.search-button{
  padding:5px;
  color:#ccc;
  font-size: 20px;
}
.search-button:hover{
  color: cornflowerblue
}
.goods-group-top-add{
  margin-left:10px;
  padding-left:20px;
  padding-right:20px;
  letter-spacing:5px;
  font-size:14px
}
.goods-group-content{
  padding: 5px 0;
}
.page{
  text-align: right;
  margin-top: 10px;
}

.img-box{
  height: 15px;
}
</style>
